[html] table 태그 summary 속성 알아보기

Last Modified : 2016-04-29 / Created : 2016-04-11

17,642
View Count

주소 복사하기

테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.

summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.

우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로 들어보자.

! Summary 태그의 예제소스 코드보기

<table summary="첫째줄은 시간을 나타내며 다른 컬럼들은 행사에 대한 장소 및 설명이다.">
<tbody>
<tr>
<td></td>
<td>장소</td>
<td>설명</td>
</tr>
<tr>
<td>13:00 ~ 14:00</td>
<td>강의실 A</td>
<td>커뮤니케이션 강화</td>
</tr>
<tr>
<td>14:00 ~ 15:00</td>
<td>강의실 B</td>
<td>컴퓨터 사이언스</td>
</tr>
</tbody>
</table>